<template>
	<view>
		<input class="input" placeholder="请输入房间号" @input="inputRoomId" />
		<view class="btnview">
			<button class="btn white" @click="enterRoom">进入房间（观众）</button>
			<button class="btn white" @click="createRoom">创建房间（主播）</button>  
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomId: 0,
			}
		},
		methods: {
			inputRoomId(e) {
				this.roomId = e.detail.value;
			},
			enterRoom() {
				if (this.roomId > 0) {
					this.$util.navigateTo('/pages/live/liveview?type=0&roomId=' + this.roomId +"&sessionId=" + this.roomId); //观众
				} else {
					this.$util.showToast('请输入房间号');
				}

			},
			createRoom() {
				if (this.roomId > 0) {
					this.$util.navigateTo('/pages/live/liveview?type=1&roomId=' + this.roomId+"&sessionId=" + this.roomId); //主播
				} else {
					this.$util.showToast('请输入房间号');
				}
			},
		}
	}
</script>

<style>
	.input {
		font-size: 32rpx;
		line-height: 60rpx;
		flex: 1;
		border: 2rpx #eee solid;
		height: 80rpx;
		margin: 10rpx 40rpx;
	}

	.btnview {
		margin: 20rpx;
	}

	.btn {
		box-sizing: border-box;
		//width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		line-height: 80rpx;
		margin: 20rpx;
	}

	.white {
		color: #ffffff;
		background-color: #4F91E2;
	}

	.placehoder {
		padding-left: 10rpx;
	}
</style>
